<template>
	<view class="order-wrap page-bg">
		<view class="status-view" v-if="status===0">
			<view class="status">等待付款</view>
			<view class="status-desc">(订单有效期24小时)</view>
		</view>
		<view class="status-view" v-if="status===2">
			<view class="status">等待商家发货</view>
			<view class="status-desc">(已支付:{{info.actualAmount}})</view>
		</view>
		<view class="status-view" v-if="status===3">
			<view class="status">等待收货</view>
			<view class="status-desc"></view>
		</view>
		<view class="status-view" v-if="status===5">
			<view class="status">交易成功</view>
			<view class="status-desc">(祝你购物愉快,欢迎下次光临~)</view>
		</view>

		<view class="page-body">
			<view class="address-wrap">
				<view class="addres ">
					<view class="address-info">
						<view class="address-name">
							<text>{{info.realName}}</text>
							<text>{{info.phoneNumber}}</text>
						</view>
						<view class="address-add desc">{{info.address}}</view>
					</view>
					<!-- <view class="address-edit">修改</view> -->
				</view>
			</view>
			
			<view class="order-group">
				<block v-for="shop in info.gropByShop" :key='shop.shopId'>
					<view class="order-shop">
						<view class="order-shop-name link">{{shop.shopName}}</view>
					</view>
			
					<view class="goods-item" v-for="goods in shop.orderItem" :key='goods.id'>
						<image class="goods-img" :src="goods.imgUrl"></image>
						<view class="goods-info">
							<view class="goods-title">{{goods.comTitle}}</view>
							<view class="goods-sepc">{{goods.skuName}}</view>
							<view class="goods-price">
								<text class="price yuan" >{{goods.price}}</text>
								<text class="f24">x{{goods.qty}}</text>
							</view>
						</view>
					</view>
				
				</block>
			
				<view class="order-info">
					<view class="line-info">
						<view class="line-info__title">订单金额</view>
						<view class="line-info__con yuan">{{info.actualAmount}}</view>
					</view>
					<view class="line-info">
						<view class="line-info__title">运费(快递)</view>
						<view class="line-info__con yuan">{{info.expressFee}}</view>
					</view>
					<view class="line-info">
						<view class="line-info__title">{{common.bean}}</view>
						<view class="line-info__con yuan">{{info.points}}</view>
					</view>
					<view class="line-info">
						<view class="line-info__title">优惠券</view>
						<view class="line-info__con yuan">{{info.couponValue}}</view>
					</view>
				</view>
				
			</view>
			
			<view class="interval"></view>
			
			<view class="line-desc-wrap">
				<view class="line-desc">
					<view class="line-info__title">订单号码:</view>
					<view class="line-info__long">{{info.orderNo}}</view>
				</view>
				<view class="line-desc">
					<view class="line-info__title">下单时间:</view>
					<view class="line-info__long">{{info.creationTime | formatTime}}</view>
				</view>
				<view class="line-desc" v-if="info.payTime">
					<view class="line-info__title">付款时间:</view>
					<view class="line-info__long">{{info.payTime | formatTime}}</view>
				</view>
				<view class="line-desc" v-if="info.deliveryTime">
					<view class="line-info__title">发货时间:</view>
					<view class="line-info__long">{{info.deliveryTime | formatTime}}</view>
				</view>
				<view class="line-desc" v-if="info.creationTime">
					<view class="line-info__title">成交时间:</view>
					<view class="line-info__long">{{info.creationTime | formatTime}}</view>
				</view>
			</view>
			
			<view class="interval"></view>
			
			<view class="contact-us" @click="makePhone">
				<image class="contact-us__icon" src="../../static/common/icon_30.png" mode=""></image>
				<view class="contact-us__title">联系客服</view>
			</view>
			
			<view class="once-pay" v-if="status===0">
				<view class="once-price">
					应付金额:<text class="yuan price">{{info.actualAmount}}</text>
				</view>
				<view class="btn btn-cancle" @click="delOrder(info.id)">取消付款</view>
				<view class="btn btn-orange" @click="payOrder(info.id)">立即付款</view>
			</view>
			
			<view class="once-pay" v-if="status===3">
				<view class="once-price">
				</view>
				<view class="btn btn-orange" @click="paySuccess('/pages/mine/orderPaySuccess')">确认收货</view>
			</view>
			
			<view class="once-pay" v-if="status===5">
				<view class="once-price">
				</view>
				<view class="btn btn-cancle" @click="delOrder(info.id)">删除订单</view>
			</view>
		</view>
		<view class="footer-block"></view>
	</view>
</template>

<script>
	import footerInfo from '../../components/footerInfo.vue'
	import common from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	export default {
		data() {
			return {
				id: '',
				info: {},
				status: 0,
				common
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getInfo()
		},
		methods: {
			getInfo() {
				api.orderDetailsById({id: this.id},(res) => {
					console.log(res);
					if(res){
						this.info = res || {}
						this.status = res.status || 0
					}
				}) 
			},
			
			link(url) {
				this.$link(url)
			},
			
			delOrder(id) {
				this.$showModal('', '确认要执行此操作么？', () => {
					api.cancelOrder({id},(res) => {
						this.$showToast('操作成功~')
						setTimeout(() => { this.$link('/pages/mine/order?status=all') }, 2000)
					}) 
				})
			},
			
			payOrder(id) {
				api.payByOrderId({id},(res) => {
					if(!res || !res.payParams) { this.$showToast('支付参数错误, 请稍后重试~'); return }
					let temp = { orderNo: res.orderNo, comTitle: res.comTitle, actualAmount }
					common.uniPay(JSON.parse(res.payParams), temp, () => {
						this.$showModal('','订单付款成功')
					})
				}) 
			},
			
			makePhone() {
				this.$makePhoneCall()
			}
		},
		components: {
			footerInfo
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');
	.page-body{
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.address-wrap{
		position: relative;
		top: -20rpx;
		.address-info{
			flex-grow: 2;
			padding: 0 20rpx;
			
		}
		.address-edit{
			height: 50rpx;
			color: @font-orange-color;
			line-height: 50rpx;
			text-align: center;
			border-radius: 50rpx;
			border: 1px solid @font-orange-color;
			.f24;
			padding: 0 20rpx;
		}
	}
	.addres {
		background: @f;
		.br;
		.content-20;
		flex-wrap: wrap;
		background: url(../../static/common/icon_08.png) no-repeat left bottom, #fff;
		background-size: 100% 9upx;
		position: relative;
		margin-bottom: 20upx;
		.flex-base;
		.address-name {
			.fw;
			.f32;
			width: 100%;
			text {
				padding-right: 20upx;
			}
		}
		.desc {
			padding: 20upx 0;
		}
	}

	.address-wrap {
		.link::after {
			position: absolute;
			right: 20upx;
		}
	}


	.order-group {
		background-color: @f;
		.br;
		.content-20;
		margin-bottom: 20upx;
	}

	.order-group:last-child {
		margin-bottom: 0;
	}

	.order-shop {
		width: 100%;
		margin-bottom: 20upx;
		.flex-base;

		.order-shop-name {
			.flex-base;
			.f24;

			&::before {
				content: '';
				background: url() no-repeat left center;
				background-size: 22upx 22upx;
				display: block;
				width: 22upx;
				height: 24upx;
				padding-right: 10upx;
			}
		}

	}

	.goods-item {
		.flex-base;
		margin-bottom: 20upx;
		padding: 0;
		padding-bottom: 20rpx;
		.bb;
		.goods-img {
			width: 150upx;
			height: 150upx;
			.br;
			margin-right: 30upx;
			flex-shrink: 0;
		}
		.goods-info {
			flex-grow: 2;
		}
		.goods-title {
			.f30;
			width: 100%;
		}
		.goods-sepc {
			.f24;
			color: @font-dark-color;
			padding: 10upx 0;
		}
		.goods-price {
			width: 100%;
			.flex-base;
			justify-content: space-between;

			.num {
				.f24;
			}
		}
	}
	.status-view {
		background-color: @font-orange-color;
		color: @f;
		padding: 20rpx 0 40rpx 0;
		box-sizing: border-box;
		text-align: center;

		.status {
			.f30;
		}

		.status-desc {
			.f24;
		}
	}
	
	.message {
		height: 100upx;
		.content-20;
		padding: 20upx 0;
	}
	.address-center {
		.f24;
		color: @theme-color;
		padding: 60upx 0 30upx 0;
	}

	.order-info {
			line-height: 35rpx;
		.line-info{
			.flex-base;
		}
		.line-info__title{
			.f24;
			color: @font-dark-color;
		}
		.line-info__con{
			.f26;
		}
	}
	.all-mount{
		padding-top: 20rpx;
		text-align: right;
		.f24;
		
	}
	
	.line-desc-wrap {
		background-color: @f;
		.br;
		.content-20;
		line-height: 35rpx;
		.line-desc{
			.flex-base;
			justify-content: flex-start;
		}
		.line-info__title{
			.f24;
			color: @font-dark-color;
			width:160rpx;
		}
		.line-info__con{
			.f24;
		}
	}
	
	.contact-us {
	background-color: @f;
	margin-bottom: 20rpx;
	.br;
		height: 88rpx;
		line-height: 88rpx;
		.flex-base;
		justify-content: center;
		.contact-us__icon{
			width: 36rpx;
			height: 26rpx;
			display: block;
			margin-right: 10rpx;
		}
		.contact-us__title{
			.f28;
		}
	}
	
	.btn-cancle{
		color: @font-base-color;
		background-color: @f;
		border: 1px solid @border-color;
		padding: 0 20rpx;
		margin-right: 20rpx;
	}
	
	.once-price{
		flex-grow: 2;
	}
	.once-pay {
		height: 100upx;
		.flex-base;
		padding: 0 30upx;
		box-sizing: border-box;
		position: fixed;
		z-index: 99;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: @f;
		.f24;
		color: @theme-color;
		.btn{
			height: 60rpx;
			line-height: 60rpx;
			.f26;
		}
	}
</style>
